<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>admin风格的弹窗</title>
    <link rel="stylesheet" href="../../assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../assets/module/admin.css?v=311"/>
</head>
<body>

<!-- 加载动画，移除位置在common.js中 -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">效果演示</div>
        <div class="layui-card-body text-center" style="padding: 30px 0px;">
            <button id="btn1" class="layui-btn">表单弹窗</button>
            <button id="btn2" class="layui-btn">最大最小化</button>
            <button id="btn3" class="layui-btn">确认弹窗</button>
            <br><br>
            <button id="btn5" class="layui-btn">输入弹窗</button>
            <button id="btn4" class="layui-btn">更改主题</button>
        </div>
    </div>
</div>

<!-- js部分 -->
<script type="text/javascript" src="../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../assets/js/common.js?v=311"></script>
<script>
    layui.use(['layer', 'admin', 'code'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var admin = layui.admin;

        $('#btn1').click(function () {
            top.layui.admin.open({
                id: 'pswForm',
                type: 2,
                title: '修改密码',
                shade: 0,
                area: ['360px', '295px'],
                content: getProjectUrl() + 'page/tpl/tpl-password.html'
            });
        });

        $('#btn2').click(function () {
            top.layui.admin.open({
                type: 2,
                title: '百度一下',
                shade: 0,
                maxmin: true,
                resize: true,
                area: ['640px', '480px'],
                content: 'https://baidu.com'
            });
        });

        $('#btn3').click(function () {
            top.layer.confirm('确认删除吗？', {
                skin: 'layui-layer-admin'
            }, function (index) {
                top.layer.close(index);
            });
        });

        $('#btn4').click(function () {
            $('#btn1').trigger('click');
            top.layui.admin.popupRight({
                id: 'layer-theme',
                type: 2,
                content: getProjectUrl() + 'page/tpl/tpl-theme.html'
            });
        });

        $('#btn5').click(function () {
            top.layer.prompt({
                skin: 'layui-layer-admin layui-layer-prompt'
            }, function (value, index, elem) {
                top.layer.close(index);
            });
        });

    });
</script>
</body>
</html>